<script setup>

  const treeData = ref([
    {
      label: '知识点1',
      children: [
        {
          label: '知识点1',
          children: [
            {
              label: '知识点1',
            },
          ],
        },
      ],
    },
    {
      label: '知识点2',
      children: [
        {
          label: '知识点2',
          children: [
            {
              label: '知识点2',
            },
          ],
        },
        {
          label: '知识点2',
          children: [
            {
              label: '知识点2',
            },
          ],
        },
      ],
    },
    {
      label: '知识点3',
      children: [
        {
          label: '知识点3',
          children: [
            {
              label: '知识点3',
            },
          ],
        },
        {
          label: '知识点3',
          children: [
            {
              label: '知识点3',
            },
          ],
        },
      ],
    },
  ])

  const tabsName = 'history';

  const historyList = ref([{
    text: '历史搜索'
  }, {
    text: '历史搜索'
  },{
    text: '历史搜索'
  },{
    text: '历史搜索'
  },{
    text: '历史搜索'
  },{
    text: '历史搜索'
  },{
    text: '历史搜索'
  },{
    text: '历史搜索'
  },])

  const favorites = ref([{
    text: '收藏'
  }, {
    text: '收藏'
  },{
    text: '收藏'
  },{
    text: '收藏'
  },{
    text: '收藏'
  },{
    text: '收藏'
  },{
    text: '收藏'
  },{
    text: '收藏'
  },])

  const searchResult = [{
    text: '搜索结果'
  }, {
    text: '搜索结果'
  },{
    text: '搜索结果'
  },{
    text: '搜索结果'
  },{
    text: '搜索结果'
  },{
    text: '搜索结果'
  },{
    text: '搜索结果'
  },{
    text: '搜索结果'
  },{
    text: '搜索结果'
  },]


</script>

<template>
  <div class="app-container">

    <div class="left">
        知识分类

      <el-tree :data="treeData" default-expand-all>

      </el-tree>

    </div>
    <div class="right">
       <div class="header">
         <h1>知识搜索</h1>
       </div>
        <div class="content">

          <div class="history-favorites">
            <el-tabs v-model="tabsName">
              <el-tab-pane name="history" label="历史搜索">
                <div v-for="item in historyList">
                  {{item.text}}
                </div>
              </el-tab-pane>
              <el-tab-pane name="favorites" label="我的收藏">
                <div v-for="item in favorites">
                  {{item.text}}
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="knowledge-search">
            <div class="search-bar">
              <div class="search-input-container">
                <input class="search-input"><button class="search-button">搜索</button>
              </div>
              <div class="choose-check">
                <el-checkbox checked style="margin-right: 5px"></el-checkbox>智能检索
                <el-checkbox></el-checkbox> 知识库检索
              </div>
            </div>
            <div class="search-result">
              搜索结果：

              <div class="search-result-item" v-for="item in searchResult">
                {{item.text}}

              </div>

            </div>
          </div>

        </div>



    </div>
  </div>
</template>

<style scoped lang="scss">
  .app-container {
    padding: 20px;
    display: flex;
    height: 100%;
    min-height: calc(100vh - 84px);
    .left {
      padding: 10px;
      font-size: 13px;
      border: 1px solid #ccc;
      width: 250px;
      height: 100%;
      min-height: calc(100vh - 84px);
    }
    .right {
      font-size: 13px;
      padding: 10px;
      flex-grow: 1;
      border: 1px solid #ccc;
      height: 100%;
      min-height: calc(100vh - 84px);
      display: flex;
      flex-direction: column;
      .header {
        height: 45px;
        h1 {
          font-size: 15px;
          font-weight: bold;
          color: #004d8c;
        }
      }
      .content {
        flex-grow: 1;
        display: flex;
        .history-favorites {
          width: 250px;
          padding: 20px;
          border: 1px solid #ccc;
          margin-right: 10px;
        }
        .knowledge-search {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          .search-bar {
            display: flex;
            height: 60px;
            .search-input-container {
              flex-grow: 1;
              display: flex;
              .search-input {
                height: 40px;
                border: 1px solid #ccc;
                flex-grow: 1;
              }
              .search-button {
                width: 60px;
                height: 40px;
                background: #6588EE;
                border: 0;
                color: white;
              }
            }

            .choose-check {
              width: 220px;
              padding-left: 15px;
            }
          }
          .search-result {
            flex-grow: 1;
            .search-result-item {

            }
          }
        }

      }
    }
  }
</style>